<template>
	<view class="page">
		<view class="subject-list">
			<text class="subject-item" :class="{ active: currentSubject === '语文' }"
				:style="{ background: currentSubject === '语文' ? themePrimary : '' }" @click="changeSubject('语文')">语文</text>
			<text class="subject-item" :class="{ active: currentSubject === '数学' }"
				:style="{ background: currentSubject === '数学' ? themePrimary : '' }" @click="changeSubject('数学')">数学</text>
			<text class="subject-item" :class="{ active: currentSubject === '英语' }"
				:style="{ background: currentSubject === '英语' ? themePrimary : '' }" @click="changeSubject('英语')">英语</text>
			<text class="subject-item" :class="{ active: currentSubject === '其他' }"
				:style="{ background: currentSubject === '其他' ? themePrimary : '' }" @click="changeSubject('其他')">其他</text>
		</view>
		<view class="main">
			<!-- 作业内容 -->
			<view class="homework-box" :style="{ background: themeTertiary }">
				<view class="homework-title" :style="{ background: themeSecondary }">
					<u-text color="#333" size="32rpx" text="作业内容"></u-text>
					<u-text align="right" color="#999" size="24rpx" text="说明：内容分条用【】"></u-text>
				</view>
				<view class="homework-content">
					<view class="homework-item">
						<textarea v-model="homeworkContent" placeholder="请输入作业条内容" :rows="3"></textarea>
					</view>
				</view>
			</view>
			<!-- 作业条图片 -->
			<view class="upload-box">
				<view class="upload-item" v-for="(item, index) in imageLists" :key="index">
					<image :src="item" mode="aspectFill" @click="previewImage(item)"></image>
				</view>
				<view class="upload-item" @click="uploadImage">
					<u-icon name="/static/icon/icon-plus.png" size="36rpx" color="#999"></u-icon>
					<view class="margin-top-xs">
						<u-text align="center" size="20rpx" color="#999" text="点击上传"></u-text>
						<u-text align="center" size="20rpx" color="#999" text="作业条图片"></u-text>
					</view>
				</view>
			</view>
			<view class="edit-box" v-if="homeworkList.length > 0">
				<u-text size="32rpx" color="#333" text="作业条编辑"></u-text>
				<view v-for="(item, index) in homeworkList" :key="index">
					<!-- 作业条列表 -->
					<view class="homework-item">
						<view>
							<u-text size="28rpx" color="#333" :text="item" v-if="item.id !== currentEditId"></u-text>
							<u-input customStyle="background:white" v-model="homeworkList[index]" placeholder="请输入作业条内容"
								v-else></u-input>
						</view>
						<view class="flex" style="gap:20rpx">
							<u-icon color="#999" size="40rpx" name="checkbox-mark" @click="updateHomework(item.id)"
								v-if="item.id === currentEditId"></u-icon>
							<u-icon color="#999" size="40rpx" name="edit-pen" @click="editHomework(item.id)" v-else></u-icon>
							<u-icon color="#999" size="40rpx" name="trash" @click="deleteHomework(index)"></u-icon>
						</view>
					</view>
					<!-- 作业条图片列表 -->
					<view class="upload-box">
						<view class="upload-item" v-for="(item, index) in imageLists" :key="index">
							<image :src="item" mode="aspectFill" @click="previewImage(item)"></image>
						</view>
						<view class="upload-item" @click="uploadImage">
							<u-icon name="/static/icon/icon-plus.png" size="36rpx" color="#999"></u-icon>
							<view class="margin-top-xs">
								<u-text align="center" size="20rpx" color="#999" text="点击上传"></u-text>
								<u-text align="center" size="20rpx" color="#999" text="作业附件"></u-text>
							</view>
						</view>
					</view>
				</view>
				<!-- 添加作业条 -->
				<view class="btn-add-homework" @click="addHomework" :style="{ background: themeTertiary, color: themePrimary }">
					<u-icon name="plus" :color="themePrimary"></u-icon>
					<text>新增作业条</text>
				</view>
			</view>
			<u-modal contentTextAlign="center" confirmColor="#FFB74D" confirmButtonShape="circle" :showCancelButton="true"
				:show="showConfirmModal" title="提示" :content='modalContent' @confirm="submit"
				@cancel="showConfirmModal = false">
				<template #content>
					<view class="text-lg">
						{{ modalContent }}
					</view>
				</template>
				<template #confirmButton>
					<view class="flex" style="gap: 20rpx">
						<u-button size="large" shape="circle" @click="showConfirmModal = false">取消</u-button>
						<u-button size="large" shape="circle" :color="themePrimary" @click="submit">确定</u-button>
					</view>
				</template>
			</u-modal>
		</view>
		<view class="footer" :style="{ boxShadow: '0 0 20rpx 0 ' + themeSecondary }">
			<u-button size="large" shape="circle" :color="themePrimary" text="提交" :disabled="!homeworkContent.trim()"
				@click="todoSubmit"></u-button>
		</view>
	</view>

</template>

<script setup>
import { ref } from 'vue';
import { useTheme } from '@/composables/useTheme';

const { themePrimary, themeSecondary, themeTertiary } = useTheme();
//当前科目
const currentSubject = ref('语文');
//当前编辑的作业条id
const currentEditId = ref(null);
//当前页面内容是否已保存
const isSave = ref(false);
//作业内容
const homeworkContent = ref('');
//作业条列表
const homeworkList = ref([]);

const imageLists = ref([]);
//确认弹窗
const showConfirmModal = ref(false);
//确认弹窗内容
const modalContent = ref('');
// 提交类型
const submitContent = ref({
	type: '',
	value: ''
});

//提交
const todoSubmit = () => {
	showConfirmModal.value = true;
	modalContent.value = '确定要提交作业条吗？';
	submitContent.value = {
		type: 'submit',
		value: homeworkContent.value
	};
};

//切换科目
const changeSubject = (name) => {
	if (!isSave.value && homeworkContent.value.trim()) {
		modalContent.value = '当前编辑内容未保存，切换科目后将丢失，确定切换吗？';
		submitContent.value = { type: 'changeSubject', value: name };
		showConfirmModal.value = true;
	} else {
		currentSubject.value = name;
		isSave.value = false;
		homeworkList.value = [];
		homeworkContent.value = '';
	}
}
//上传作业条图片
const uploadImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		success: (res) => {
			imageLists.value.push(res.tempFilePaths);
		}
	});
};

//预览作业条图片
const previewImage = (item) => {
	uni.previewImage({
		urls: imageLists.value,
		current: item
	});
};

//新增作业条
const addHomework = () => {
	homeworkList.value.push('');
};
//编辑作业条
const editHomework = (id) => {
	currentEditId.value = id;
};

//更新作业条
const updateHomework = (id) => {
	currentEditId.value = null;
};

//删除作业条
const deleteHomework = (index) => {
	submitContent.value = { type: 'delete', value: index };
	modalContent.value = '确定要删除该作业条吗？';
	showConfirmModal.value = true;
};

//提交
const submit = () => {
	if (submitContent.value.type === 'submit') {
		homeworkList.value = homeworkContent.value.split(/[\r\n]+/).filter(item => item.trim())
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		});
		isSave.value = true;
	} else if (submitContent.value.type === 'delete') {
		homeworkList.value.splice(submitContent.value.value, 1);
	} else if (submitContent.value.type === 'changeSubject') {
		changeSubject(submitContent.value.value);
	}
	showConfirmModal.value = false;
};

</script>
<style lang="scss" scoped>
.subject-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
	background: white;

	.subject-item {
		border-radius: 32rpx;
		padding: 10rpx 40rpx;
		box-sizing: border-box;
		align-items: center;
		color: #666;
		font-size: 30rpx;

		&.active {
			color: #fff;
		}
	}
}

.homework-box {
	box-sizing: border-box;
	background: #FFF9F0;
	border-radius: 30rpx;
	overflow: hidden;

	.homework-title {
		display: flex;
		background: #FFF1D9;
		padding: 24rpx;
	}

	.homework-content {
		height: 200rpx;

		.homework-item {
			padding: 30rpx;
		}
	}
}

.upload-box {
	display: flex;
	flex-wrap: wrap;
	gap: 30rpx;
	margin-top: 30rpx;

	.upload-item {
		width: 160rpx;
		height: 160rpx;
		border-radius: 30rpx;
		background: #F7F7F7;
		border: solid 1px #d8d8d8;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: solid 1px #d8d8d8;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

.edit-box {
	background: white;
	border-radius: 30rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-top: 20rpx;

	.homework-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f7f7f7;
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
}

.btn-add-homework {
	// background: #FFF1D9;
	border-radius: 50rpx;
	box-sizing: border-box;
	margin-top: 30rpx;
	// color: #FFA40C;
	text-align: center;
	height: 80rpx;
	font-size: 32rpx;
	font-weight: 500;
	gap: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		width: 24rpx;
		height: 24rpx;
	}
}
</style>